<!-- 学校和教育局登录页面 -->
<template>
  <p class="bg"></p>
  <div class="login-box display-flex">
    <div class="login-form">
      <p class="ls fz24 b">东卓课后服务平台管理系统</p>

      <n-tabs class="mt40" type="line" animated justify-content="space-evenly">
        <n-tab-pane name="学校登录" tab="学校登录">
          <div class="pt20">
            <n-form ref="formRef" :model="xxfrom" :rules="rules">
              <n-form-item path="phone" label="手机号码">
                <n-input
                  v-model:value="xxfrom.phone"
                  type="text"
                  placeholder="手机号码"
                />
              </n-form-item>
              <n-form-item path="paw" label="密码">
                <n-input
                  v-model:value="xxfrom.paw"
                  type="password"
                  placeholder="请输入登录密码"
                />
              </n-form-item>
            </n-form>
            <div class="mt40">
              <n-button
                type="info"
                class="w100 fz18"
                size="large"
                @click="denglu"
              >
                登录
              </n-button>
            </div>
          </div>
        </n-tab-pane>
        <n-tab-pane name="教育局" tab="教育局">
          <n-form ref="formRefer" :model="xxfromer" :rules="ruleser">
            <n-form-item path="phone" label="手机号码">
              <n-input
                v-model:value="xxfromer.phone"
                type="text"
                placeholder="手机号码"
              />
            </n-form-item>
            <n-form-item path="paw" label="密码">
              <n-input
                v-model:value="xxfromer.paw"
                type="password"
                placeholder="请输入登录密码"
              />
            </n-form-item>
          </n-form>
          <div class="mt40">
            <n-button
              type="info"
              class="w100 fz18"
              size="large"
              @click="dengluer"
            >
              登录
            </n-button>
          </div>
        </n-tab-pane>
      </n-tabs>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { dxpost, hf } from "../../util/index";
import { ref } from "vue";
const formRef = ref();
const formRefer = ref();
const xxfrom = ref({
  phone: "",
  paw: "",
});
const xxfromer = ref({
  phone: "",
  paw: "",
});
const rules = {
  phone: {
    required: true,
    message: "请输入手机号码",
    trigger: "blur",
  },
  paw: {
    required: true,
    message: "请输入密码",
    trigger: "blur",
  },
};
const ruleser = {
  phone: {
    required: true,
    message: "请输入手机号码",
    trigger: "blur",
  },
  paw: {
    required: true,
    message: "请输入密码",
    trigger: "blur",
  },
};
const denglu = () => {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      const { data }: any = await dxpost(
        "courseManagement/api/xxLoading",
        xxfrom.value
      );
      localStorage.xxid = data.id;
      hf("cxxinfobj");
    }
  });
};
const dengluer = () => {
  formRefer.value?.validate(async (errors) => {
    if (!errors) {
      const { data }: any = await dxpost(
        "courseManagement/api/xxseducationBureau",
        xxfromer.value
      );
      localStorage.jyjid = data.id;
      localStorage.qyId = data.qyId;
      hf("cjiaoyuju");
    }
  });
};
</script>
<style scoped>
.bg {
  background: url(../../assets/img/bg-login.f15a076.jpg) no-repeat center center /
    cover !important;
  width: 100%;
  height: 100%;
  position: fixed;
}
.login-box {
  margin-left: -540px;
  margin-top: -334px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 1080px;
  height: 668px;
  background: #fff url(../../assets/img/img-login.4975acf.png) no-repeat 100% 0;
  -webkit-box-shadow: 0 0 30px rgba(195, 195, 195, 0.75);
  box-shadow: 0 0 30px rgba(195, 195, 195, 0.75);
}
.login-form {
  width: 370px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 90px 0 0 70px;
}
</style>
